<template>
  <transition name="panel-slide">
    <div class="process-panel-wrapper" :class="{ 'panel-visible': visible }" v-if="visible">
      <div class="panel-container">
        <div class="panel-header">
          <span class="panel-title">
            <BpmnIcon :name="bpmnIconName" />{{ customTranslate(currentElementType || 'Process') }}
          </span>
          <el-button type="primary" link :icon="Close" @click="closePanel" />
        </div>

        <el-tabs v-model="activeTab" class="panel-tabs">
          <!-- 节点属性 -->
          <el-tab-pane label="节点属性" name="basic">
            <el-form label-position="left" :model="basicForm" class="panel-form">
              <!-- 基础信息 -->
              <div class="section">
                <div class="section-title">基础信息</div>
                <el-form-item label="节点ID">
                  <el-input
                    v-model="basicForm.id"
                    placeholder="请输入节点ID"
                    @change="handleBasicFormChange"
                  />
                </el-form-item>
                <el-form-item label="节点名称">
                  <el-input
                    v-model="basicForm.name"
                    placeholder="请输入节点名称"
                    @change="handleBasicFormChange"
                  />
                </el-form-item>
              </div>

              <!-- 连线配置 -->
              <div v-if="showSequenceConfig" class="section">
                <div class="section-title">连线配置</div>
                <el-form-item label="流转类型">
                  <el-select
                    v-model="sequenceConfig.flowType"
                    placeholder="请选择流转类型"
                    class="w-full"
                    @change="handleFlowTypeChange"
                  >
                    <el-option
                      v-for="option in flowTypeOptions"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                    />
                  </el-select>
                </el-form-item>

                <!-- 按钮选择 -->
                <el-form-item v-if="showButtonSelect" label="按钮类型">
                  <el-select
                    v-model="sequenceConfig.buttonType"
                    placeholder="请选择按钮类型"
                    class="w-full"
                    @change="handleButtonTypeChange"
                  >
                    <el-option
                      v-for="option in buttonTypeOptions"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                    />
                  </el-select>
                </el-form-item>

                <!-- 条件表达式 -->
                <el-form-item v-if="showExpressionInput" label="条件表达式">
                  <el-input
                    v-model="sequenceConfig.conditionExpression"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入条件表达式"
                    @change="handleSequenceChange"
                  />
                </el-form-item>
              </div>

              <!-- 服务配置 -->
              <div v-if="showServiceConfig" class="section">
                <div class="section-title">服务配置</div>
                <el-form-item label="服务类型">
                  <el-input
                    v-model="serviceConfig.implementation"
                    :placeholder="getImplementationPlaceholder"
                    @change="handleServiceChange"
                  />
                </el-form-item>
              </div>

              <!-- 事件配置 -->
              <div v-if="showEventConfig" class="section">
                <div class="section-title">事件配置</div>
                <el-form-item label="事件类型">
                  <el-input
                    v-model="eventConfig.eventDefinitionType"
                    placeholder="请输入事件类型"
                    @change="handleEventChange"
                  />
                </el-form-item>
              </div>

              <!-- 会签配置 -->
              <div v-if="showMultiInstance" class="section">
                <div class="section-title">会签设置</div>
                <el-form-item label="开启会签">
                  <el-switch v-model="isMultiInstance" @change="handleMultiInstanceChange" />
                </el-form-item>

                <template v-if="isMultiInstance">
                  <el-form-item label="审批方式">
                    <el-select
                      v-model="multiInstanceConfig.approveMethod"
                      placeholder="请选择审批方式"
                      class="w-full"
                      @change="handleApproveMethodChange"
                    >
                      <el-option
                        v-for="option in APPROVE_METHODS"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                      />
                    </el-select>
                  </el-form-item>

                  <!-- 会签通过比例（仅在会签模式下显示） -->
                  <el-form-item label="通过比例" v-if="multiInstanceConfig.approveMethod === 2">
                    <el-slider
                      v-model="multiInstanceConfig.approveRatio"
                      :min="10"
                      :max="100"
                      :step="10"
                      :format-tooltip="(value) => `${value}%`"
                      @change="handleApproveRatioChange"
                    />
                    <div class="form-item-help">
                      <el-icon><InfoFilled /></el-icon>
                      <span class="help-text">设置会签通过所需的最低比例</span>
                    </div>
                  </el-form-item>

                  <!-- 会签人数和完成条件会根据审批方式和通过比例自动设置 -->
                </template>
              </div>

              <!-- 超时策略配置 -->
              <div v-if="showAssigneeConfig" class="section">
                <div class="section-title">超时策略</div>
                <el-form-item label="超时策略">
                  <el-select
                    v-model="assigneeConfig.timeoutStrategy"
                    placeholder="请选择超时策略"
                    class="w-full"
                    @change="handleAssigneeChange"
                  >
                    <el-option label="不设置" value="" />
                    <el-option label="自动通过" value="auto_pass" />
                    <el-option label="自动拒绝" value="auto_reject" />
                    <el-option label="仅提醒" value="only_notify" />
                  </el-select>
                </el-form-item>

                <el-form-item label="超时时间" v-if="assigneeConfig.timeoutStrategy">
                  <TimeoutPicker
                    v-model="assigneeConfig.dueDate"
                    @update:modelValue="handleAssigneeChange"
                  />
                </el-form-item>
              </div>
            </el-form>
          </el-tab-pane>

          <!-- 表单配置 -->
          <el-tab-pane label="表单配置" name="form" v-if="showFormConfig">
            <el-form label-position="left" :model="formConfig" class="panel-form">
              <!-- 表单整体配置 -->
              <el-form-item label="表单标识">
                <el-input
                  v-model="formConfig.formKey"
                  placeholder="请输入表单标识"
                  @change="handleFormChange"
                />
              </el-form-item>

              <el-form-item label="表单权限">
                <el-switch
                  v-model="formConfig.formReadOnly"
                  active-text="只读"
                  inactive-text="可编辑"
                  @change="handleFormChange"
                />
              </el-form-item>

              <el-form-item label="提交权限">
                <el-switch
                  v-model="formConfig.formSubmit"
                  active-text="允许提交"
                  inactive-text="禁止提交"
                  @change="handleFormChange"
                />
              </el-form-item>

              <!-- 表单段权限配置 -->
              <div class="form-fields-config">
                <div class="list-header">
                  <span class="group-title">字段权限配置</span>
                  <el-button type="primary" link :icon="Plus" @click="handleAddFormField">
                    添加字段
                  </el-button>
                </div>

                <el-empty v-if="!formConfig.fields.length" description="暂无字段配置" />
                <template v-else>
                  <el-card v-for="(field, index) in formConfig.fields" :key="index" class="mb-4">
                    <template #header>
                      <div class="card-header">
                        <span>字段 {{ index + 1 }}</span>
                        <el-button
                          type="danger"
                          link
                          :icon="Delete"
                          @click="handleRemoveFormField(index)"
                        />
                      </div>
                    </template>

                    <el-form label-position="left">
                      <el-form-item label="字段ID">
                        <el-input
                          v-model="field.id"
                          placeholder="请输入字段ID"
                          @change="handleFormChange"
                        />
                      </el-form-item>

                      <el-form-item label="字段名称">
                        <el-input
                          v-model="field.name"
                          placeholder="请输入字段名称"
                          @change="handleFormChange"
                        />
                      </el-form-item>

                      <el-form-item label="字段类型">
                        <el-select
                          v-model="field.type"
                          placeholder="请选择字段类型"
                          class="w-full"
                          @change="handleFormChange"
                        >
                          <el-option label="文本" value="string" />
                          <el-option label="长文本" value="text" />
                          <el-option label="数字" value="number" />
                          <el-option label="日期" value="date" />
                          <el-option label="布尔" value="boolean" />
                          <el-option label="枚举" value="enum" />
                        </el-select>
                      </el-form-item>

                      <el-form-item label="权限控制">
                        <el-select
                          v-model="field.permission"
                          placeholder="请选择权限类型"
                          class="w-full"
                          @change="handleFormChange"
                        >
                          <el-option label="可编辑" value="write" />
                          <el-option label="只读" value="read" />
                          <el-option label="隐藏" value="hidden" />
                        </el-select>
                      </el-form-item>

                      <el-form-item label="必填">
                        <el-switch v-model="field.required" @change="handleFormChange" />
                      </el-form-item>

                      <!-- 当段类型为枚举时显示选项配置 -->
                      <template v-if="field.type === 'enum'">
                        <el-form-item label="枚举选项">
                          <el-input
                            v-model="field.values"
                            type="textarea"
                            rows="3"
                            placeholder="请输入枚举选项，每行一个项"
                            @change="handleFormChange"
                          />
                        </el-form-item>
                      </template>
                    </el-form>
                  </el-card>
                </template>
              </div>
            </el-form>
          </el-tab-pane>

          <!-- 代办人配置 -->
          <el-tab-pane label="代办人" name="assignee" v-if="showAssigneeConfig">
            <el-form label-position="left" :model="assigneeConfig" class="panel-form">
              <!-- 空审批人策略配置 -->
              <div class="strategy-section">
                <el-radio-group
                  v-model="assigneeConfig.emptyStrategy"
                  class="strategy-radio-group"
                  @change="handleAssigneeChange"
                >
                  <el-radio-button
                    v-for="option in emptyStrategyOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  >
                    {{ option.label }}
                  </el-radio-button>
                </el-radio-group>
              </div>

              <!-- 代办人策略配置 -->

              <!-- 当选择指定成员审批时显示代办人配置 -->
              <template v-if="assigneeConfig.emptyStrategy === 'specified_user'">
                <!-- 按钮配置 -->
                <div class="buttons-config-section">
                  <div class="section-title">按钮配置</div>

                  <el-table
                    :data="assigneeConfig.buttons"
                    class="button-table"
                    size="small"
                    :max-height="null"
                    :border="false"
                    :fit="true"
                  >
                    <!-- 开关列 - 减小宽度 -->
                    <el-table-column width="50" align="center">
                      <template #default="{ row }">
                        <el-switch
                          v-model="row.enabled"
                          @change="handleButtonStatusChange"
                          size="small"
                          style="--el-switch-on-color: var(--el-color-primary)"
                        />
                      </template>
                    </el-table-column>

                    <!-- 类型列 - 调整宽度 -->
                    <el-table-column prop="type" label="按钮类型" width="120">
                      <template #default="{ row }">
                        <el-tag
                          :type="getButtonStyle(row.type).tagType"
                          :style="{
                            backgroundColor: row.enabled ? getButtonStyle(row.type).bgColor : '',
                            color: row.enabled ? getButtonStyle(row.type).textColor : '',
                            borderColor: row.enabled ? getButtonStyle(row.type).borderColor : '',
                          }"
                          class="button-type-tag"
                          :effect="row.enabled ? 'plain' : 'plain'"
                        >
                          {{ getButtonTypeLabel(row.type) }}
                        </el-tag>
                      </template>
                    </el-table-column>

                    <!-- 按钮名称列 - 使用固定宽度 -->
                    <el-table-column label="按钮名称" width="90">
                      <template #default="{ row }">
                        <el-input
                          v-model="row.name"
                          :disabled="!row.enabled"
                          :placeholder="row.enabled ? '请输入按钮名称' : ''"
                          size="small"
                          @change="handleAssigneeChange"
                          class="button-name-input"
                        />
                      </template>
                    </el-table-column>

                    <!-- 排序列 - 调整宽度 -->
                    <el-table-column label="排序" width="70" align="center">
                      <template #default="{ row }">
                        <el-input-number
                          v-model="row.sort"
                          :disabled="!row.enabled"
                          :min="1"
                          :controls="false"
                          :max="assigneeConfig.buttons.length"
                          size="small"
                          class="sort-input"
                          @change="handleAssigneeChange"
                        />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Close, Plus, Delete, InfoFilled } from '@element-plus/icons-vue'
import { useBasicForm } from '../hooks/useBasicForm'
import { useSequenceConfig } from '../hooks/useSequenceConfig'
import { useServiceConfig } from '../hooks/useServiceConfig'
import { useEventConfig } from '../hooks/useEventConfig'
import { useAssigneeConfig } from '../hooks/useAssigneeConfig'
import { useFormConfig } from '../hooks/useFormConfig'
import { useButtonConfig } from '../hooks/useButtonConfig'
import { useMultiInstanceConfig } from '../hooks/useMultiInstanceConfig'
import type { PropertyPanelProps } from '../types'
import { customTranslate } from '@/views/ProcessDesign/modules/Translate/index'
import BpmnIcon from '@/views/ProcessDesign/components/BpmnIcon.vue'
import TimeoutPicker from '@/views/ProcessDesign/components/TimeoutPicker.vue'
import getBpmnIconType from '@/views/ProcessDesign/bpmn-icons/getIconType'
import bpmnIcons from '@/views/ProcessDesign/bpmn-icons'
import { APPROVE_METHODS } from '../const/const'

const props = defineProps<PropertyPanelProps>()
const emit = defineEmits(['update:visible'])

const activeTab = ref('basic')
const currentElementType = ref<string | undefined>(undefined)
const bpmnIconName = ref<string>('Process')

// 使用 hooks
const { basicForm, handleBasicFormChange } = useBasicForm(props)
const {
  sequenceConfig,
  showSequenceConfig,
  handleSequenceChange,
  flowTypeOptions,
  showExpressionInput,
  showButtonSelect,
  handleFlowTypeChange,
  handleButtonTypeChange,
} = useSequenceConfig(props)
const { serviceConfig, showServiceConfig, handleServiceChange, getImplementationPlaceholder } =
  useServiceConfig(props)
const { eventConfig, showEventConfig, handleEventChange } = useEventConfig(props)
const {
  assigneeConfig,
  showAssigneeConfig,
  emptyStrategyOptions,
  handleAssigneeChange,
  handleButtonStatusChange,
} = useAssigneeConfig(props)
const { formConfig, showFormConfig, handleFormChange, handleAddFormField, handleRemoveFormField } =
  useFormConfig(props)
const { buttonTypeOptions, getButtonTypeLabel, getButtonStyle } = useButtonConfig()

// 会签配置
const {
  showMultiInstance,
  isMultiInstance,
  multiInstanceConfig,
  handleMultiInstanceChange,
  handleApproveMethodChange,
  handleApproveRatioChange,
} = useMultiInstanceConfig(props)

// 监听当前元素变化，自动切换到合适的签页
watch(
  () => props.currentElement?.type,
  (type: string | undefined) => {
    console.log('type', type)
    currentElementType.value = type?.split(':')[1]
    if (props.currentElement) {
      const activatedElementTypeName = getBpmnIconType(props.currentElement)
      bpmnIconName.value = bpmnIcons[activatedElementTypeName]
    }
    activeTab.value = 'basic'
  },
  { immediate: true },
)

// 使用 emit 更新 visible
const closePanel = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
/* 面板基础样式 */
.process-panel-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 420px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
}

.panel-visible {
  right: 0;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
}

/* 面板容器 */
.panel-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

/* 面板头部 */
.panel-header {
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid var(--el-border-color-lighter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  position: relative;
  padding-left: 16px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;

  .bpmn-icon {
    width: 20px;
    height: 20px;
  }
}

.panel-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: var(--el-color-primary);
  border-radius: 2px;
}

/* 签页容器 */
.panel-tabs {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
  overflow: hidden;
  background: var(--el-fill-color-blank);
}

/* 标签页导航样式优化 */
:deep(.el-tabs__header) {
  margin: 0;
  padding: 12px 12px 0;
  background: var(--el-fill-color-blank);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 10;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0;
}

:deep(.el-tabs__nav) {
  border: none !important;
  background: var(--el-fill-color-light);
  padding: 4px;
  border-radius: 8px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

:deep(.el-tabs__item) {
  height: 36px;
  line-height: 36px;
  font-size: 13px;
  padding: 0 16px;
  transition: all 0.3s;
  color: var(--el-text-color-regular);
  position: relative;
  border-radius: 6px;
  flex: 1;
  text-align: center;
  margin: 0 2px;
}

:deep(.el-tabs__item:first-child) {
  margin-left: 0;
}

:deep(.el-tabs__item:last-child) {
  margin-right: 0;
}

:deep(.el-tabs__item:hover) {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

:deep(.el-tabs__item.is-active) {
  font-weight: 600;
  color: var(--el-color-primary);
  background: var(--el-fill-color-blank);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 移除下划线效果 */
:deep(.el-tabs__item)::after,
:deep(.el-tabs__active-bar) {
  display: none;
}

/* 内容区域优化 */
:deep(.el-tabs__content) {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--el-fill-color-blank);
}

/* 表单容器样式 */
.panel-form {
  padding: 0 4px;
}

/* 表单项样式优化 */
:deep(.el-form-item) {
  background: var(--el-fill-color-light);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  transition: all 0.3s;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
}

:deep(.el-form-item:hover) {
  background: var(--el-fill-color-blank);
  border-color: var(--el-border-color);
  transform: none;
}

:deep(.el-form-item:last-child) {
  margin-bottom: 0;
}

/* 表单标签样式化 */
:deep(.el-form-item__label) {
  padding: 0;
  line-height: 32px;
  font-size: 13px;
  color: var(--el-text-color-regular);
  font-weight: 500;
  width: 100px !important;
  margin-right: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

:deep(.el-form-item__label)::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 12px;
  background: var(--el-color-primary);
  border-radius: 1px;
  margin-right: 6px;
  opacity: 0.6;
}

:deep(.el-form-item__content) {
  flex: 1;
  margin-left: 0 !important;
}

/* 输入框样式优化 */
:deep(.el-input__wrapper),
:deep(.el-textarea__wrapper),
:deep(.el-select) {
  box-shadow: none;
  background: var(--el-fill-color-blank);
  border: 1px solid var(--el-border-color-lighter);
  transition: all 0.2s;
}

:deep(.el-input__wrapper:hover),
:deep(.el-textarea__wrapper:hover),
:deep(.el-select:hover .el-input__wrapper) {
  border-color: var(--el-border-color);
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-textarea__wrapper.is-focus),
:deep(.el-select .el-input__wrapper.is-focus) {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 1px var(--el-color-primary-light-8);
}

/* 拉框特殊处理 */
:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__wrapper) {
  background: transparent;
}

/* 文本域特殊处理 */
:deep(.el-textarea .el-textarea__inner) {
  padding: 8px 12px;
}

/* 表单项获得焦点时的效果 */
:deep(.el-form-item.is-focus) {
  background: var(--el-fill-color-blank);
  border-color: var(--el-color-primary-light-7);
}

/* 监听器列表样式 */
.listener-list {
  padding: 0;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

:deep(.el-card) {
  margin-bottom: 16px;
  border-radius: 8px;
  transition: all 0.3s;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

:deep(.el-card:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-card__header) {
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-light);
  background: linear-gradient(to right, #f8f9fa, #fff);
}

:deep(.el-card__body) {
  padding: 20px;
}

/* 空状态样式 */
:deep(.el-empty) {
  padding: 40px 0;
  background: #f8f9fa;
  border-radius: 8px;
}

:deep(.el-empty__description) {
  margin-top: 16px;
  color: var(--el-text-color-secondary);
}

/* 按钮样式 */
:deep(.el-button) {
  transition: all 0.3s;
}

:deep(.el-button:hover) {
  transform: translateY(-1px);
}

/* 滚动条样式 */
:deep(.el-tabs__content::-webkit-scrollbar) {
  width: 6px;
}

:deep(.el-tabs__content::-webkit-scrollbar-thumb) {
  background: #dcdfe6;
  border-radius: 3px;
}

:deep(.el-tabs__content::-webkit-scrollbar-track) {
  background: #f8f9fa;
  border-radius: 3px;
}

/* 分组标题 */
.group-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0;
  padding-left: 16px;
  position: relative;
}

.group-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: var(--el-color-primary);
  border-radius: 2px;
}

/* 面板滑动动画 */
.panel-slide-enter-active,
.panel-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-slide-enter-from,
.panel-slide-leave-to {
  transform: translate(100%, -50%); /* 从右侧滑入/滑出 */
  opacity: 0;
}

.panel-slide-enter-to,
.panel-slide-leave-from {
  transform: translate(0, -50%);
  opacity: 1;
}

/* 单项动画 */
:deep(.el-form-item) {
  position: relative;
  overflow: hidden;
}

:deep(.el-form-item)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--el-color-primary);
  transition: all 0.3s;
  transform: translateX(-50%);
}

:deep(.el-form-item:hover)::after {
  width: 100%;
}

:deep(.el-form-item:focus-within)::after {
  width: 100%;
}

/* 监听器卡片样式 */
:deep(.el-card) {
  position: relative;
  overflow: hidden;
}

:deep(.el-card)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(var(--el-color-primary-rgb), 0.05));
  opacity: 0;
  transition: all 0.3s;
}

:deep(.el-card:hover)::before {
  opacity: 1;
}

.card-header {
  position: relative;
  z-index: 1;
}

:deep(.el-card__body) {
  position: relative;
  z-index: 1;
}

/* 修改表单属性 */
.panel-form {
  :deep(.el-form--label-left) {
    .el-form-item__label {
      text-align: left;
    }
  }
}

/* 处理本域的特殊情况 */
:deep(.el-form-item--default) {
  .el-form-item__content {
    .el-textarea {
      width: 100%;
    }
  }
}

/* 策略选择区域样式 */
.strategy-section {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

/* 策略选择组样式 */
.strategy-radio-group {
  display: inline-flex;
  flex-wrap: nowrap;
  background: var(--el-fill-color-light);
  padding: 4px;
  border-radius: 8px;
  white-space: nowrap;
}

:deep(.el-radio-button) {
  flex: 0 0 auto;
}

:deep(.el-radio-button__inner) {
  padding: 8px 16px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: none;
  background: transparent;
  box-shadow: none !important;
  border-radius: 6px;
  white-space: nowrap;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-radius: 6px;
}

:deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 6px;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background-color: var(--el-color-primary);
  box-shadow: none;
}

:deep(.el-radio-button:not(:last-child)) {
  margin-right: 4px;
}

/* 代办人配置区域样式 */
.assignee-config-section {
  margin-top: 16px;
  padding: 16px;
  background: var(--el-fill-color-light);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-lighter);
}

.assignee-config-section:hover {
  border-color: var(--el-border-color);
}

/* 按钮配置区域样式 */
.buttons-config-section {
  margin-top: 20px;
  background: var(--el-fill-color-blank);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--el-border-color-lighter);
  width: 100%;
  overflow: hidden; /* 防止内容溢出 */
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.section-title::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--el-color-primary);
  margin-right: 8px;
  border-radius: 2px;
}

/* 按钮表格样式优化 */
.button-table {
  --el-table-border-color: var(--el-border-color-lighter);
  --el-table-header-bg-color: var(--el-fill-color-light);
  border-radius: 8px;
  width: 100% !important;
}

/* 表格头部样式 */
:deep(.el-table__header) {
  th {
    background-color: var(--el-fill-color-light);
    font-weight: 600;
    font-size: 13px;
    color: var(--el-text-color-primary);
    height: 44px;
    padding: 8px 0;
  }
}

/* 表格行样式 */
:deep(.el-table__row) {
  height: 50px;
  transition: all 0.3s;

  &:hover {
    background-color: var(--el-fill-color-light) !important;
  }

  &.row-disabled {
    opacity: 0.6;
  }
}

/* 表格单元格样式 */
:deep(.el-table__cell) {
  padding: 8px !important;
}

/* 按钮类型标签样式 */
.button-type-tag {
  width: 64px;
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
}

/* 按钮名称输入框样式 */
.button-name-input {
  :deep(.el-input__wrapper) {
    padding: 0 8px;
  }
}

/* 排序输入框样式 */
.sort-input {
  :deep(.el-input__wrapper) {
    padding: 0 4px;
    width: 50px;
  }
}

/* 开关样式优化 */
:deep(.el-switch) {
  --el-switch-on-color: var(--el-color-primary);
  --el-switch-off-color: var(--el-border-color-lighter);

  &.is-checked {
    .el-switch__core {
      border-color: var(--el-color-primary);
    }
  }
}

/* 移除表格边框和滚动条 */
:deep(.el-table__inner-wrapper) {
  &::before,
  &::after {
    display: none;
  }
}

:deep(.el-table__body-wrapper) {
  overflow: visible !important;
}

/* 优化表格内容区域 */
:deep(.el-table__body) {
  width: 100% !important;
}

/* 优化表格行高度 */
:deep(.el-table__row) td {
  height: 50px;
}

/* 禁用状态下的样式 */
:deep(.el-table__row) {
  &.disabled-row {
    .el-input__wrapper,
    .el-input-number__wrapper {
      background-color: var(--el-fill-color-light);
    }

    .button-type-tag {
      opacity: 0.6;
    }
  }
}

/* 表格容器阴影效果 */
.button-table {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 表格hover效果 */
:deep(.el-table__row:hover) td {
  background-color: var(--el-fill-color-light) !important;
}

/* 移除所有滚动条 */
:deep(.el-table__body-wrapper),
:deep(.el-table__header-wrapper) {
  overflow: hidden !important;
}

:deep(.el-table__inner-wrapper) {
  overflow: hidden !important;
}

/* 确保表格内容完整显示 */
:deep(.el-table__body),
:deep(.el-table__header) {
  width: 100% !important;
  table-layout: fixed !important;
}

/* 优化按钮类型标签样式 */
.button-type-tag {
  width: 64px;
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
}

/* 优化按钮名称输入框样式 */
.button-name-input {
  :deep(.el-input__wrapper) {
    padding: 0 8px;
  }
}

/* 优化排序输入框样式 */
.sort-input {
  :deep(.el-input__wrapper) {
    padding: 0 4px;
    width: 50px;
  }
}

/* 确保表格内容垂直居中 */
:deep(.el-table__cell) {
  > .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

/* 优化表格布局 */
:deep(.el-table) {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100% !important;
}

/* 确保内容不换行 */
:deep(.el-table__cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 会签设置区域样式 */
.multi-instance-section {
  margin-top: 20px;
  background: var(--el-fill-color-blank);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--el-border-color-lighter);
}

.multi-instance-section:hover {
  border-color: var(--el-border-color);
}

/* 帮助文本样式 */
.form-item-help {
  margin-top: 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}

.help-text {
  text-decoration: underline dotted;
  cursor: help;
}

/* 变量列表样式 */
:deep(.variables-tooltip) {
  max-width: none !important;
  padding: 12px !important;
}

.variables-list {
  min-width: 300px;
}

.variable-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  white-space: nowrap;
}

.variable-item:last-child {
  margin-bottom: 0;
}

.variable-item code {
  padding: 2px 4px;
  background: var(--el-color-primary-light-9);
  border-radius: 2px;
  color: var(--el-color-primary);
  font-family: monospace;
}

.variable-item span {
  color: var(--el-text-color-regular);
}

/* 添加新的节点样式 */
.section {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--el-fill-color-blank);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-lighter);
}

.section:hover {
  border-color: var(--el-border-color);
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 优化表单布局 */
.panel-form {
  padding: 16px;
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-form-item:last-child) {
  margin-bottom: 0;
}
</style>
